<script lang="ts" setup >


// 好友列表
// 导入搜索框数据
import { friendaddAPI } from '@/apis/friendaddAPI'
import { getAlluserAPI } from '@/apis/alluserAPI'
import { reactive, toRefs } from 'vue'
// 导入搜索框数据
import { getFriendInfoAPI } from '@/apis/friendAPI'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const route = useRouter()
const homeInfoList = ref([])
const getHomeInfo = async () => {
  const res = await getFriendInfoAPI()
  homeInfoList.value = res.data

}
onMounted(() => getHomeInfo())
// 好友列表

// 新好友框
const newshow = ref(false)

// 新好友框

// 搜索框所有用户
const alluserList = ref([])
const getAlluser = async () => {
  const res = await getAlluserAPI()
  alluserList.value = res.data

}

onMounted(() => getAlluser())

// 搜索框所有用户


// 搜索框
const state = ref('')

interface LinkItem {
  friendId: any
  value: any
  head: any
  createdTime: any
  city: any
}

const links = ref<LinkItem[]>([])

const loadAll = async () => {
  await getAlluserAPI()
  // const a = alluserList.value[0].nickname
  console.log(alluserList.value.length);
  const arr = []
  for (let i = 0; i < alluserList.value.length; i++) {
    arr.push({
      friendId: `${alluserList.value[i]?.userId}`,
      value: `${alluserList.value[i]?.nickname}`,
      head: `${alluserList.value[i]?.head}`,
      createdTime: `${alluserList.value[i]?.createdTime}`,
      city: `${alluserList.value[i]?.city}`,
      // userId: `${alluserList.value[i]?.userId}`,
    })
  }
  return arr
}
declare namespace NodeJS {
  type Timeout = any
}

let timeout: NodeJS.Timeout
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value

  clearTimeout(timeout)
  timeout = setTimeout(() => {
    cb(results)
  }, 1000 * Math.random())
}
const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const friendIds = ref(null)
const friendNickNames = ref('')
const heads = ref(null)
const createdTimes = ref('')
const citys = ref('')
const handleSelect = (item: LinkItem) => {
  friendIds.value = item.friendId
  friendNickNames.value = item.value
  heads.value = item.head
  createdTimes.value = item.createdTime
  citys.value = item.city

  // 打开新用户面板
  newshow.value = !newshow.value
}

onMounted(async () => {
  links.value = await loadAll()
})
// 搜索框


// 设置头像
// 导入头像


// const isCollapse = ref(true)
const states = reactive({
  fits: 'fill',
  url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
})
const { url } = toRefs(states)



// 加好友
const addFriend = async () => {
  const friendId = friendIds.value
  const friendNickName = friendNickNames.value
  const head = heads.value
  // post给friend/list
  await friendaddAPI({
    friendId,
    friendNickName,
    head,
  })

}

// 加好友
</script>

<template>
  <div style=" z-index: 999;" @click=" newshow = false">
    <!-- 新好友框 -->
    <div class="newfriend" v-show="newshow">

      <div class="top">
        <!-- 详细信息头像 -->
        <el-avatar shape="square" :size="80" :src="url" class="top-img" />
        <div class="top-text">
          <h2>{{ friendNickNames }}</h2>
          <p>微信号：smallwechat{{ friendIds }}</p>
          <p>地区：{{ citys }}</p>
        </div>
      </div>
      <hr>
      <div class="submit">
        <button @click="addFriend">添加到通讯录</button>
      </div>

    </div>
    <ul infinite-scroll-immediate="true" class="infinite-list" style="overflow: auto">
      <!-- 搜索框 -->
      <div class="search">
        <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="添加新好友" @select="handleSelect"
          style=" width: 100%;margin:.5vw 0vw; color: #c0c4cc;" />
        <el-icon size="1.2vw" color="#c0c4cc" class="plus">
          <CirclePlus />
        </el-icon>
      </div>
      <!-- 好友列表 -->
      <li v-for="i in homeInfoList" :key="i.userId" class="infinite-list-item">
        <RouterLink active-class="active" :to="`/friend/list/${i.friendId}`">
          <!-- 头像 -->
          <div class="demo-fit">
            <div class="block">
              <el-avatar shape="square" :size="50" :src="i.head" />
            </div>
          </div>
          <p ref="friendnotes">{{ i.friendNotes }}</p> <!--  i.friendNotes -->

        </RouterLink>
      </li>
      <!-- 好友列表 -->
    </ul>
  </div>
</template>


<style scoped lang="scss">
// 新好友框
.newfriend {
  position: fixed;
  left: 13vw;
  top: 2vw;
  width: 16vw;
  height: 14vw;
  background-color: #ffffff;
  z-index: 666;
  // 去除滚动条
  overflow-y: hidden;

  hr {
    opacity: 0.3;
  }

  .top {
    width: 16vw;
    height: 8vw;
    vertical-align: middle;

    .top-img {
      float: left;
      margin-top: 1vw;
      margin-left: 1vw;
    }

    .top-text {
      float: left;
      margin-left: 1vw;
      margin-top: 1vw;

      h2 {
        margin: 0 !important;
      }

      p {
        margin-top: .3vw;
      }
    }
  }

  .submit {
    width: 16vw;
    height: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
      width: 8vw;
      height: 2.5vw;
      background-color: #07c160;
      border: none;
      border-radius: .5vw;

      &:hover {
        opacity: 0.6;
      }
    }
  }
}

// 新好友框
.infinite-list {

  // 搜索框
  .search {
    position: relative;
    width: 100%;

    .plus {
      position: absolute;
      top: .8vw;
      right: .5vw;
    }

  }

  height: 100vh;
  padding: 0;
  margin: 0;
  list-style: none;

  .infinite-list-item {
    &:hover {
      background-color: pink;
    }

    position: relative;
    line-height: 5vw;
    height: 5vw;
    background: var(--el-color-primary-light-9);
    margin: 0;
    color: var(--el-color-primary);

    p {
      margin-left: 4.5vw;
      font-size: large;
      color: #000;
    }


  }
}


.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}

/* 头像 */
.demo-type>div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.demo-fit {
  position: absolute;
  top: 1vw;
  left: 1vw;
}
</style>
